<template>
	<page-meta :root-font-size="fontSize"></page-meta>
	<view class="mycontent">
		<block v-for="(item,index) in getOrderList" :key="index">
			<view class="whiteBg" >
				<view @click="Detail(item)">
					<!-- 站点信息 -->
					<view style="display: flex;align-items: center;justify-content: space-between;margin-top: 30rpx;">
						<view style="display: flex;align-items: center;">
							<image style="width: 48rpx; height: 40rpx;margin-left:32rpx;margin-top:5rpx;" src="../../../static/order/keche.png"></image>
							<text class="jh_fs_34 jh_ellipsis" style="width: 400rpx;color: #2C2D2D;margin-left:15rpx;font-weight: bold;">
							{{item.LineName}}
							</text>
						</view>
						
						<text class="jh_fs_32" style="width: 160rpx; line-height: 44rpx;color: red;text-align: right;margin-right: 20rpx;font-weight: 400;">{{getOrderStates(item.State,item.StateType)}}</text>
					</view>
					<!-- 时间 -->
					<view style="display: flex;align-items: center;justify-content: space-between;margin-top: 30rpx;">
						<view style="display: flex;align-items: center;justify-content: center;">
							<image style="width: 34rpx; height: 34rpx; margin-left:96rpx;margin-top: -1rpx;" src="../../../static/order/time.png"></image>
							<text class="jh_fs_32 jh_ellipsis" style="color: #000;margin-left: 20rpx;font-weight: 400;width: 350rpx;">{{timeFormat(item.SetoutTime)}}</text>
						</view>
						
						<text class="jh_fs_32" style=" width: 160rpx; line-height: 44rpx;text-align: right;margin-right: 20rpx;font-weight: 400;color: blue;">{{item.TotalPrice}}元</text>
					</view>
					<!-- 起点-终点 -->
					<view style="display: flex;align-items: center;margin-top: 20rpx;">
						<view class="bluering"></view>
						<text class="jh_fs_32" style="color: #000;margin-left: -80rpx;font-weight: 400;">{{item.StartSiteName}}</text>
					</view>
								
					<view style="display: flex;align-items: center;margin-top: 20rpx;">
						<view class="redring"></view>
						<text class="jh_fs_32" style="color: #000;margin-left: -80rpx;font-weight: 400;">{{item.EndSiteName}}</text>
					</view>
				</view>
				<!-- State:3已上车 4尚未取票 5已取票 6联网退票 7待确认 9被撤销 22已改签 34车辆调度中 13订单结束 6,7,9,13-->
				<!-- <button v-if="item.State != 6 || item.State != 7 || item.State != 9 || item.State != 13" class="jh_u-f-ac" style="width: 80px;height: 30px;border-radius: 10rpx;margin-right: 20rpx;font-size: 26rpx;" @click="carLocation(item)">车辆位置</button> -->
			</view>
			
		</block>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		props: {
			busOrderList: {
				type: Array,
				default () {
					return [];
				}
			},
			fontSize:{
				type:String,
				default:''
			}
		},
		data() {
			return {
			}
		},
		computed:{
			getOrderList(){
				// console.log(this.busOrderList);
				return this.busOrderList;
			}
		},
		methods: {
			//---------------------------------------------快捷弹窗---------------------------------------------
			showToast:function(title,type){
				this.$refs.uToast.show({
					title: title,
					type: type
				})
			},
			// --------------------------------------------------详情--------------------------------------------------
			Detail: function(item) {
				// url:'../CTKY/orderDetail?orderInfo=' + JSON.stringify(item)
				
				uni.navigateTo({
					url:'../../pages_IntercityExpress/Order/OrderDetail?orderInfo=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			carLocation(item){
				console.log('车辆位置',item);
				if(item.PlanCoachCardNumber !== 'null'){
					if(item.ProcessState != 3){
						uni.navigateTo({
							url:'../../pages/Order/mapPolyline?AID='+item.AID+'&ScheduleCompanyCode='+item.ScheduleCompanyCode+'&ExecuteScheduleID='+item.ExecuteScheduleID+'&PlanCoachCardNumber='+item.PlanCoachCardNumber
						})
					}else{
						_self.showToast('无法查看车辆位置','warning');
					}
				}else {
					this.showToast('暂无法查看车辆位置','warning');
				}
			},
			getOrderStates:function(State,StateType){
				// StateType是直接显示状态的文字
				// State:3已上车 4尚未取票 5已取票 6联网退票 7待确认 9被撤销 22已改签 34车辆调度中 13订单结束
				switch (State){
					case 3:
					    return '已上车';
					break;
					case 4:
						//要求将‘尚未取票’改为‘出票成功’
					    return '出票成功';
					break;
					case 5:
					    return '已取票';
					break;
					case 6:
						return '联网退票';
					break;
					case 7:
						return '待确认';
					break;
					case 9:
						return '被撤销';
					break;
					case 22:
						return '已改签';
					break;
					case 34:
						return '车辆调度中';
					break;
					case 13:
						return '订单结束';
					break;
					default:
						return StateType;
					break;
				}
			},
			//--------------------时间格式化------------------------------
			timeFormat: function(time) {
				var dateTime = time.replace('T', ' ');
				return dateTime.substring(0, 16);
			},
		}
	}
</script>

<style lang="scss">
	.mycontent {
		flex: 1;
		width: 100%;
		background-color: #F5F9FC;
		height: 100%;
	}

	.whiteBg {
		// position: relative;
		margin: 52rpx 26rpx;
		width: 698rpx;
		padding: 10rpx 0 50rpx 0;
		background: #FFFFFF;
		border-radius: 12rpx;
		// box-shadow: 0 0 5rpx 0rpx #aaa;
	}

	.reserveDate {
		padding: 5rpx 25rpx;
		background-color: #06B4FD;
		color: #FFFFFF;
		border-radius: 24rpx;
		font-size: 24rpx;
	}
	.bluering {
		width: 12rpx;
		height: 12rpx;
		border: 4rpx solid #06B4FD;
		background: #06B4FD;
		border-radius: 100%;
		margin: 0rpx 96rpx;
	}
	
	.redring {
		width: 12rpx;
		height: 12rpx;
		border: 4rpx solid #FC4646;
		background: #FC4646;
		border-radius: 100%;
		margin: 0rpx 96rpx;
	}
</style>
